<template>
    <div class="course common-layout">
        <el-container class="container-box">
            <el-main class="container-main">
                <div class="course-header">
                    <!-- <el-button class="margin-bottom20" @click="start" size="default" type="primary">刷新</el-button> -->
                    <!-- shadow="never" -->
                    <el-card class="card height-100 margin-top20" v-loading="loading">
                        <div class="card-item">
                            <el-image class="card-item-image" :src="courseGroup.banner" fit="" />
                            <el-descriptions class="card-descriptions" :column="2" :title="courseGroup.name" extra=""
                                size="default">
                                <template #title>
                                    {{ courseGroup.name }}
                                </template>
                                <!-- （${courseGroup.count}课时） -->
                                <el-descriptions-item :span="2" :label="`课程介绍：`">
                                    <el-tooltip disabled effect="dark" :content="courseGroup.info" placement="top">
                                        <el-text size="default" type="info" line-clamp="4">
                                            {{ courseGroup.info }}
                                        </el-text>
                                    </el-tooltip>
                                </el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </el-card>
                </div>
                <div class="course-content">
                    <el-table stripe v-loading="loading" :data="courseList" class="cursor-pointer" @row-click="study">
                        <template v-slot:empty>
                            <el-empty image="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/ojSass-empty.png" />
                        </template>
                        <el-table-column type="index" width="50"></el-table-column>
                        <el-table-column prop="banner" label="" width="120">
                            <template #default="{ row }">
                                <el-image style="width:100px" :src="row.banner" fit="" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="课程" width="250"></el-table-column>
                        <el-table-column prop="introduction" label="课程介绍" width="">
                            <template #default="{ row }">
                                {{ row.introduction || row.info || row.name }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="introduction" fixed="right" label="" width="200">
                            <template #default="{ row }">
                                <el-button class="" @click="study(row)" size="default" type="primary">立即学习</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup lang='ts'>
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { asyncGetAllCourseGroup, asyncselectcourse } from '../../../api';
import { Storekey } from "../../../interface";
import Alymodel from '../../../mysql_interface/model';

const prop = defineProps<{ ID: number, myCourseIDs: number[] }>()

const store = useStore(Storekey)
const route = useRoute()
const router = useRouter()
// 当前登录用户
const user = computed(() => {
    return store.state.user;
});
const teamId = computed(() => {
    return Number(user.value?.teamid);
});

onMounted(async () => {
    await start()
})
const loading = ref(true)
async function start() {
    loading.value = true;
    // 课包-课程
    await getCourseGroup(prop.ID)
    // 课程详情
    await getCourseDetail()
    loading.value = false;
}
// 获取所有课程包-课程
const courseGroup = ref<Alymodel.CourseGroup>({ coursecatebag: [] })
async function getCourseGroup(id: string) {
    const { rows, count } = await asyncGetAllCourseGroup({
        teamid: teamId.value,
        ID: id,
        // _order: "ID",
        _order: "paixu",
        _sortable: "ASC"
    })
    // 排序
    courseGroup.value = rows[0] || { coursecatebag: [] }
}
// 获取团队成员课程配置 user_ID - course_ID
const courseList = ref<Alymodel.IMcourse[]>([])
async function getCourseDetail() {
    const cids = courseGroup.value.coursecatebag.map(e => e.cid)
    const { rows, count } = await asyncselectcourse({
        teamid: teamId.value, ID: cids,
        _limit: 1000,
        _order: ["paixu", "ID"],
        _sortable: "ASC"
    })
    // courseList.value = rows // 全部展示
    // 处理课程列表：展示全部（没权限的禁用还是不显示）
    courseList.value = rows.filter(course => prop.myCourseIDs.includes(course.ID))
}

function study(row: Alymodel.IMcourse) {
    router.push({
        name: '观看课程',
        params: { ID: row.ID, },
        query: { catebag: prop.ID, ID: row.ID, lession: 0, } // myCourseIDs: prop.myCourseIDs
    });
}

</script>

<style scoped>
.container-box {
    /* 外边距 */
    --container-margin: 20px;
    --container-bg-color: #fff;
}

.container-main {
    padding: var(--container-margin) var(--container-margin) 10px;
    /* !!! */
    /* overflow: hidden; */
}

.course-header {
    background: var(--container-bg-color);
    width: 100%;
    padding-bottom: 10px;
}

.card {
    min-width: 400px;
}

.card-item {
    display: flex;
}

.card-item-image {
    width: 240px;
    min-width: 240px;
    height: 158px;
    min-height: 158px;
    overflow: visible;
}

.card-descriptions {
    margin-left: 20px;
}


.course-content {
    height: calc(100vh - 64px - 2 * var(--container-margin) -47px - 262px);
    /* padding: var(--container-margin) var(--container-margin) 10px; */
}
</style>

<style>
#app.ojSass .course .el-card__body {
    padding: 10px;
    padding-right: 40px;
}
</style>